<template>
	<view>
		<u-popup :show="isShow" mode="bottom" @close="closePopup" closeable closeOnClickOverlay>
			<template v-if="isLoading">
				<view class="pop-product el-flex">
					<u-loading-icon size='50'></u-loading-icon>
				</view>
			</template>
			<template v-else>
				<view class="pop-product">
					<u-sticky bgColor="#fff">
						<view class="pro-info el-flex">
							<view class="product-img el-flex">
								<image :src="dataInfo.img_url" mode=""></image>
							</view>
							<view class="product-desc">
								<view class="product-price el-flex">
									<view class="price cur-price">
										¥{{dataInfo.price}}
									</view>
									<view class="price origin-price">
										¥{{dataInfo.market_price}}
									</view>
								</view>
								<view class="name text-ellipsis">
									<text class="version-name text-ellipsis">
										<text>{{dataInfo.name}}</text>
									</text>
								</view>
							</view>
						</view>

					</u-sticky>
					<view class="max5">
						<view v-if="goods_info.length!=0">
							<GoodsSku @getSelect='getSelectItem' :buy_option='buy_option' :goodsData='goods_info'
								:skuId="dataInfo.goods_id" />
						</view>
						<template v-if="batch_info&&batch_info.length!==0">
							<view class="batch-detail">
								<view class="batch-tit">
									套装明细
								</view>
								<block v-for="(batch,batchIndex) in batch_info" :key="batchIndex">
									<view class="batch-group">
										<view class="batch-product el-flex">
											<view class="batch-img">
												<image :src="batch.goods_info[0].img_url" mode=""></image>
											</view>
											<view class="batch-name">
												{{batch.goods_info[0].name}}
											</view>
										</view>
									</view>
								</block>
							</view>
						</template>
						<view class="btn-cart-bottom">
							<view class="action-cart-box el-flex">
								<view class="buy-cart-btn" @click="changeCart">
									确定
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import GoodsSku from '../goods/goods.vue'
	export default {
		name: "pop-good-item",
		components: {
			GoodsSku
		},
		props: {
			goods_id: {
				type: [String, Number],
				default: ''
			},
			isShow: {
				type: Boolean,
				default: false
			},
			packageList: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			isShow: {
				handler(newVal) {
					if (newVal) {
						this.isLoading = true
						this.fetchData()
					}
				},
				immediate: true
			},
		},
		data() {
			return {
				buy_option: [],
				dataInfo: {},
				goods_info: [],
				batch_info: [],
				isLoading: false,
				selectedArr: []
			};
		},
		methods: {
			changeCart() {
				if (this.dataInfo.goods_id == this.goods_id) {
					this.$emit('closePopupPlus')
					return;
				};
				if (Object.keys(this.dataInfo) === 0) {
					return;
				}
				let item = this.dataInfo
				let obj = {
					name: item.name,
					commodity_id: item.commodity_id,
					goods_id: item.goods_id,
					img_url: item.img_url,
					market_price: item.market_price,
					multi_service_bargins: item.multi_service_bargins,
					price: item.price,
					product_id: item.product_id,
					page_id: item.page_id,
					prop_list: item.prop_list,
					reduce_price: item.reduce_price,
					buy_option: this.buy_option,
					product_info: this.product_info.product_desc_ext,
					packageList: this.packageList,
					original_name: this.product_info.name,
					selectedArr: this.selectedArr
				}
				this.changeCartData(obj, this.goods_id, res => {
					if (res) {
						this.$emit('changeCartItem')
					} else {
						this.$refs.uToast.show({
							type: 'default',
							message: "获取商品item失败",
						})
					}
				})
				this.$emit('closePopupPlus')
			},
			closePopup() {
				this.$emit('closePopupPlus')
			},
			getSelectItem(obj) {
				let id = obj.id
				this.selectedArr = obj.selectedArr
				const data = this.goods_info.find(item => {
					if (item.goods_id == id) return item
				})
				this.dataInfo = data
			},
			changeCartData(ori_goods_data, goods_id, callback) {
				let self = this
				uni.showLoading({
					title: ''
				});
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:6455/changeCartData',
					method: 'POST',
					data: {
						ori_goods_data: ori_goods_data,
						goods_id: goods_id
					},
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							callback(true)
							uni.hideLoading();
						} else {
							callback(false)
							uni.hideLoading();
						}
					},
					fail: function(err) {
						callback(false)
						uni.hideLoading();
					}
				})
			},
			fetchData() {
				if (this.goods_id == '') return;
				this.$request.get('/getInfoData', {
					id: this.goods_id
				}).then((res) => {
					let buy_option = []
					this.product_info = res.data.data.product_info
					let default_prop_list = []
					buy_option = res.data.data.buy_option
					this.selectGoodId = res.data.data.default_goods_id
					this.batch_info = res.data.data.batch_info
					this.goods_info = res.data.data.goods_info
					this.goods_info.forEach((item, index) => {
						if (item.goods_id == this.selectGoodId) {
							this.dataInfo = this.goods_info[index]
							default_prop_list = this.goods_info[index].prop_list
						}
					})
					buy_option.forEach((item, index) => {
						default_prop_list.forEach((i, j) => {
							if (buy_option[index].prop_cfg_id == default_prop_list[j]
								.prop_cfg_id) {
								buy_option[index].list.forEach((a, b) => {
									if (a.prop_value_id == default_prop_list[j]
										.prop_value_id) {
										a.selected = true
									} else {
										a.selected = false
									}
								})
							} else {
								buy_option[index].list.forEach((a, b) => {
									a.selected = false
								})
							}
						})
					})
					this.buy_option = buy_option
					this.isLoading = false
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-sticky {
		top: 0 !important;
	}

	/deep/.u-loading-icon__spinner {
		width: 1.2rem;
		height: 1.2rem;
	}

	/deep/.u-popup__content__close {
		z-index: 999;
		top: .288rem !important;
		right: .288rem !important;
	}

	/deep/.u-popup__content {
		border-top-left-radius: 0.24rem;
		border-top-right-radius: 0.24rem;
	}

	.pop-product {
		background: white;
		border-top-left-radius: 0.24rem;
		border-top-right-radius: 0.24rem;
		padding: 0 0.32rem 0.8rem 0.32rem;
		height: 8.92rem;
		overflow-y: scroll;
		max-height: 8.92rem;
		min-height: 8.92rem;
		box-sizing: border-box;

		.pro-info {
			padding: 0.32rem 0 0.2rem;
			justify-content: space-between;

			.product-img {
				width: 1.68rem;
				min-width: 1.68rem;
				height: 1.68rem;
				text-align: center;
				overflow: hidden;
				border-radius: 0.08rem;
				background: rgba(0, 0, 0, .04);

				image {
					width: 1.44rem;
					height: 1.44rem;
				}
			}

			.product-desc {
				width: 4.5rem;
				height: 1.67rem;
				margin: 0 0 0 0.32rem;

				.product-price {
					justify-content: flex-start;
					margin-top: 0.2rem;

					.cur-price {
						color: #ff6700;
						font-size: .36rem;
						font-weight: 900;
						font-family: Avenir, Arial, sans-serif;
						margin-right: .1rem;
					}

					.origin-price {
						color: rgba(0, 0, 0, .54);
						font-size: .2rem;
						line-height: 1em;
						margin-bottom: -.1rem;
						text-decoration: line-through;
					}
				}

				.name {
					font-size: .2rem;
					height: 0.64rem;
					line-height: .32rem;
					margin-top: 0.2rem;

					.version-name {
						text {
							margin-right: .06rem;
						}
					}
				}
			}
		}


	}

	.btn-cart-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;

		.action-cart-box {
			height: 1.04rem;
			padding: 0.12rem 0.31rem;

			.buy-cart-btn {
				height: 0.82rem;
				line-height: .82rem;
				background: url(../../static/images/icon-buy-tc.png) no-repeat;
				background-size: 100% 100%;
				border-radius: 0.4rem;
				color: #fff;
				display: block;
				text-align: center;
				width: 100%;
				font-size: .28rem;
			}
		}
	}
</style>